import Link from "next/link";
// import { usePathname } from "next/navigation";
import clsx from "clsx";
import styles from "./layout.module.css";

const menu = [
  { name: "首页", path: "/", icon: "HomeIcon" },
  { name: "内容", path: "/article", icon: "DocumentDuplicateIcon" },
  { name: "关于", path: "/about", icon: "UserGroupIcon" },
];

export default function HeadNav() {
  // const pathname = usePathname();

  return (
    <>
      {menu.map((tab) => {
        const LinkIcon = tab.icon;
        return (
          <Link
            key={tab.name}
            href={tab.path}
            className={clsx(
              "flex h-[48px] grow items-center justify-center gap-2 rounded-md p-3 text-sm font-medium hover:bg-gray-50 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
            )}
          >
            <p className="hidden md:block">{tab.name}</p>
          </Link>
        );
      })}
    </>
  );
}
